<template>
    <div class="customer_item_container">
        <img v-bind:src="img_src" alt="">
        <div class="inner_wrapper">
            <span class="title">{{title}}</span>
            <span class="content">{{content}}</span>
        </div>

    </div>
</template>

<script>
    export default {
        props:["title","content","img_src"]
    }
</script>

<style lang="scss">

    .customer_item_container{
        display: flex;
        flex:1;
        position: relative;
        margin: 2rem 3rem ;

        img{
            width: 100%;
        }
        .title{
            font-size: $fz22;
        }

        .content{
            font-size: $fz16;
        }

        .inner_wrapper{
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            span{
                color: white;
            }
        }
    }

    @media screen and (min-width: 415px) and (max-width: 1420px) {
        .customer_item_container{
            margin: 0.5rem 1rem;
        }
    }

    /**
移动端样式
 */
    @media screen and (max-width: $mobile_width) {
        .customer_item_container{
            display: flex;
            flex:1;
            position: relative;
            margin: 0.5rem 0.8rem;

            img{
                width: 100%;
                height: 100%;
            }

            .title{
                font-size: 16px;
            }

            .content{
                font-size: 12px;
            }
        }
    }

</style>
